<template>
  <div class="container">
    <h3>我们的产品</h3>
    <h1>适应多种应用场景</h1>
    <div class="app-container">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item class="one">
          <div class="title">分布式光伏</div>
        </el-carousel-item>
        <el-carousel-item class="two">
          <div class="title">商业化光伏</div>
        </el-carousel-item>
        <el-carousel-item class="three">
          <div class="title">工业化光伏</div>
        </el-carousel-item>
        <el-carousel-item class="four">
          <div class="title">一体化光伏</div>
        </el-carousel-item>
      </el-carousel>
      <h3>全生命周期</h3>
      <h1>完整的产品体系</h1>
      <div class="product">
        <div class="item">
          <div class="top">
            <p>报装业务管理系统</p>
            <span>提供获客、勘察、领料、施工、并网的全生命周期管理，提高项目质量及数字化创新;</span>
          </div>
          <ul>
            <li>
              <p>电站建档</p>
              <div>现场勘察、图纸设计、接入方案备案</div>
            </li>
            <li>
              <p>安装并网</p>
              <div>领料审批、项目施工、电站并网</div>
            </li>
            <li>
              <p>团队管理</p>
              <div>权责分明，企业组织构架，员工权限分配</div>
            </li>

          </ul>
          <a href="">了解详情</a>
        </div>
        <div class="item">
          <div class="top">
            <p>智能监控运维系统</p>
            <span>保障光伏电站上电即上云，实现数智化、低成本的电站状态监控和智能运维服务;</span>
          </div>
          <ul>
            <li>
              <p>电站监控</p>
              <div>电站状态、发电量数据、发电功率实时监控</div>
            </li>
            <li>
              <p>故障报警</p>
              <div>报警中心，设备异常远程自动提醒</div>
            </li>
            <li>
              <p>工单派发</p>
              <div>现场勘察、图纸设计、接入方案备案</div>
            </li>

          </ul>
          <a href="">了解详情</a>
        </div>
        <div class="item">
          <div class="top">
            <p>一站式移动应用</p>
            <span>融合能量流和信息流，全场景智能联接，推动多方协同的一站式移动应用;</span>
          </div>
          <ul>
            <li>
              <p>农户端</p>
              <div>收益记录、合同内容查看，收益提现申请</div>
            </li>
            <li>
              <p>业务管理端</p>
              <div>项目管理、智能运维一站式应用管理</div>
            </li>
            <li>
              <p>待办提醒</p>
              <div>流程审批待办、设备异常报警提醒</div>
            </li>

          </ul>
          <a href="">了解详情</a>
        </div>
        <div class="item">
          <div class="top">
            <p>资产管理系统</p>
            <span>精准掌控材料出入库和电站收益核算，实现“一物一档”的数字化管理模式;</span>
          </div>
          <ul>
            <li>
              <p>收益核算</p>
              <div>发电量统计，电费、租金划拨，在线申请提现</div>
            </li>
            <li>
              <p>投后管理</p>
              <div>电站数量、发电功率、收益数据大屏监控</div>
            </li>
            <li>
              <p>保险管理</p>
              <div>光伏电站上险，质保险增加安全保障</div>
            </li>
          </ul>
          <a href="">了解详情</a>
        </div>
      </div>

    </div>

  </div>
</template>
<script>
export default {
  name: 'Announcement'
}
</script>

<style scoped>
.product {
  display: flex;
  justify-content: space-between;
}
.item {
  width: 300px;
  height: 480px;
  background-color:  rgb(244, 246, 249);
}
li {
  margin-bottom: 30px;
  font-weight: 600;
  color: black;
  list-style: none;
}
li div{
  font-weight: 400;
  font-size: 12px;
}
.item a{
  display: inline-block;
  width: 200px;
  height: 40px;
border: 1px #2784f4 solid;
margin-left: 50px;
margin-top: 15px;
text-align: center;
line-height: 40px;
color: #2784f4;;
}
a:hover{
  background-color: #2784f4;
  color: white;
  transition: all .8s;
}
.item .top {
 padding-top: 1px;
  width: 100%;
  height: 125px;
  background-image: url('./top.png');
  background-size: contain;
}
.item .top p{
  font-size: 24px;
  color: white;
  /* margin-top: 10px; */
  margin-left: 10px;
}
.item .top span{
  color: white;
  font-size: 12px;
  display: inline-block;
  margin-left: 13px;
  margin-right: 13px;

}
.container{
  background-color: rgb(210, 216, 225);
}
h3 {
  margin-top: 17px;
}
.one {
  background-image: url('./fenbu.png');
  background-size: cover;
}
.two {
  background-image: url('./gy.png');
  background-size: cover;

}
.three {
  background-image: url('./last.png');
  background-size: cover;

}
.four {
  background-image: url('./sy.png');
  background-size: cover;

}
 .title {
  margin-top: 250px;
  margin-left: 180px;
   color: white;
   font-size: 60px;
   font-weight: 900;
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
